$(function () {
  let middlleMapData = {
    上城区:{left:523,top:81,total:80,serviceNumber:77,rented:54,contact:13},
    拱墅区:{left:494,top:64,total:17,serviceNumber:17,rented:34,contact:18},
    余杭区:{left:422,top:52,total:16,serviceNumber:26,rented:12,contact:28},
    西湖区:{left:472,top:102,total:26,serviceNumber:39,rented:3,contact:22},
    滨江区:{left:512,top:115,total:35,serviceNumber:11,rented:19,contact:38},
    萧山区:{left:517,top:157,total:10,serviceNumber:14,rented:5,contact:38},
    桐庐区:{left:302,top:224,total:33,serviceNumber:2,rented:45,contact:39},
    临平区:{left:520,top:30,total:33,serviceNumber:2,rented:45,contact:39},
    钱塘区:{left:600,top:70,total:7,serviceNumber:43,rented:2,contact:39},
    富阳区:{left:415,top:181,total:16,serviceNumber:1,rented:23,contact:37},
    临安区:{left:257,top:108,total:25,serviceNumber:31,rented:18,contact:27},
    淳安县:{left:136,top:289,total:25,serviceNumber:31,rented:18,contact:17},
    建德市:{left:298,top:324,total:42,serviceNumber:15,rented:40,contact:11}
  }

  let string = ''

  let temp = `<li style="left:{{left}}px;top:{{top}}px;"><span>{{key}}</span><div class="map-tips"><h3>{{key}}</h3>
                <p>房间总量：{{total}} 套</p>
                <p>整租：{{rented}} 套</p>
                <p>合租：{{contact}} 套</p>
                <p>人数：{{serviceNumber}} 人</p>
              </div>
            </li>`

  for(let key in middlleMapData ){
    let obj = middlleMapData[key];
    string += temp.replace(/{{key}}/gi,key)
      .replace("{{total}}",obj.total)
      .replace("{{left}}",obj.left)
      .replace("{{top}}",obj.top)
      .replace("{{rented}}",obj.rented)
      .replace("{{contact}}",obj.contact)
      .replace("{{serviceNumber}}",obj.serviceNumber)
  }

  $('#middleMap').html(string)

  // 杭州市 13个地方
  var arrCun =  ['上城区','拱墅区','余杭区','西湖区','滨江区','萧山区','桐庐区','临平区','钱塘区','富阳区','临安区','淳安县','建德市'];

  var dialogUnit3 = ['套','套','套','套']
// 对话框1 的数组
  let dataArr9 = []
  for (let i = 0; i < 13; i++) {
    dataArr9.push(50 * Math.random())
  }
  let dataArr10 = []
  for (let i = 0; i < 13; i++) {
    dataArr10.push(100 * Math.random())
  }


  var getDailog3Option = function (dataArr9,dataArr10) {
    return  {
      tooltip: {
        trigger: 'axis',
        backgroundColor:'#fff',
        textStyle:{
          color:'#000',
          lineHeight:'24px',
        },
        padding:[15,25,15,20],
        //label格式化
        formatter : function(params){
          if(params.length > 0 ){
            let h1 = `<div style="font-size:18px;font-weight:600;margin-bottom:6px">${params[0].name}</div>`;
            params.forEach((item,index)=>{
              h1+= `<div style="padding-top:5px;padding-bottom:5px;">${item.marker} ${item.seriesName}: ${parseInt(item.data)}${dialogUnit3[index]}</div>`
            })
            return h1;
          }else{
            return ''
          }
        },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      color:['#0D33FF','#FD5353'],
      grid: {
        top:'22%',
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: arrCun,
          axisLabel: {
            color: '#9E9E9E',
            fontSize: 12,
            rotate: 10,
            margin: 20,
            align: 'center'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'RGBA(67, 236, 255, 0.5)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type:"dashed",
              color:  '#2A2A2A',
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          // name: "总价(万元)",
          // nameTextStyle:{
          //   padding:[0,0,20,0],
          //   color:'#fff'
          // },
          axisLabel: {
            formatter: "{value}",
            color: '#9E9E9E',
            fontSize: 12,
            margin: 5,
            align: 'center'
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type:"dashed",
              color:  '#2A2A2A',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              type:"dashed",
              color:  '#2A2A2A',
            }
          },
        },
      ],
      series: [
        {
          barWidth:14,
          name: "整租",
          type: "bar",
          data: dataArr9,
        },
        {
          barWidth:14,
          name: "合租",
          type: "bar",
          data: dataArr10,
        },
      ]
    }
  }

  var middleBox3Dom = document.getElementById('middleBox3');
  let middleBox3Chart = echarts.init(middleBox3Dom);

  middleBox3Chart.setOption(getDailog3Option(dataArr9,dataArr10))
  
})